<template>
  <div>
    <div>
      <div class="addkpxx">
        <div>
          <a-button
            v-if="$parent.dfhymflag"
            type="primary"
            class="editable-add-btn"
            @click="handleAdd"
          >新增开票信息</a-button>
          <span style="    font-size: 18px; font-weight: bold;" v-if="!$parent.dfhymflag">开票信息</span>
        </div>
        <span>
          <a-icon v-if="$store.state.kpxx" type="close" @click="close" />
        </span>
      </div>
      <div class="hydj" v-if="$store.state.kpxxflg">
        <kpxxtk class="hydj_xgym"></kpxxtk>
      </div>
      <a-table :dataSource="dataSource" :pagination="false" :columns="columns">
        <template slot="BEIZHU" slot-scope="text, record">
          <div class="kpxx_td">{{text}}</div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div v-if="$parent.dfhymflag" class="editable-row-operations">
            <span>
              <a class="del" @click="() => xiugai(record)">修改</a>
              <a-popconfirm
                v-if="dataSource.length"
                title="确定删除吗?"
                @confirm="() => onDelete(record,record.key)"
              >
                <a>删除</a>
              </a-popconfirm>
            </span>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import kpxxtk from "./kpxxtk.vue";
import qs from "qs";

//开票信息----开始

const dataSource = [
  {
    key: "0",
    bh: "编号",
    name: "分类名称",
    paixu: "32",
    address: "London, Park Lane no. 0"
  },
  {
    key: "1",
    bh: "编号",
    name: "排序",
    paixu: "32",
    address: "London, Park Lane no. 1"
  }
];

const columns = [
  {
    title: "公司名称",
    dataIndex: "GSMC",
    width: "30%",
    scopedSlots: { customRender: "GSMC" }
  },
  {
    title: "手机号码",
    dataIndex: "PHONE",
    scopedSlots: { customRender: "PHONE" }
  },
  {
    title: "开票信息",
    dataIndex: "BEIZHU",
    width: "30%",
    scopedSlots: { customRender: "BEIZHU" }
  },
  {
    title: "默认标记",
    dataIndex: "MRBJ",
    scopedSlots: { customRender: "MRBJ" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
//开票信息----开始
export default {
  data() {
    return {
      dataSource,
      columns,
      kpxxphone: ""
    };
  },

  methods: {
    onDelete(value, key) {
      console.log(1);
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.key !== key);
      this.axios
        .post(
          "huiyuan/invoiceDelete.php",
          qs.stringify({
            id_num: value.ID_NUM,
            hyphone: this.$parent.kpxxphone
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    handleAdd() {
      this.$store.state.kpxxflg = true;
    },
    getinvoiceList() {
      console.log("kpxxphone", this.$parent.kpxxphone);
      this.axios
        .post(
          "huiyuan/invoiceList.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            hyphone: this.$parent.kpxxphone
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.dataSource = res.data.result.result;
            for (var i = 0; i < this.dataSource.length; i++) {
              this.dataSource[i].key = i;
            }
          } else {
            this.dataSource = [];
          }
        });
    },
    xiugai(value) {
      this.$store.state.editInvoice = value;
      this.$store.state.kpxxflg = true;
      this.$store.state.kpxxbj = true;
      console.log(this.$store.state.editInvoice);
    },
    close() {
      this.$store.state.kpxx = false;
      this.$store.state.kpxxbj = false;
    }
  },
  components: {
    kpxxtk
  },
  created() {
    this.kpxxphone = this.$parent.kpxxphone;
    // console.log(this.$parent.dfhymflag);
    this.getinvoiceList();
  }
};
</script>

<style lang='less'>
.addkpxx {
  display: flex;
  justify-content: space-between;
  padding: 20px 25px;
  text-align: left;
  i {
    font-size: 20px;
  }
}
.hydj {
  position: absolute;
  width: 100%;
  z-index: 999;
  background: rgba(255, 255, 255, 0.1);
  top: 0px;
}
.kpxx_td {
  //  width: 80%;
  // margin-left: 105px;
  // text-align: left;
}
  .kpxx_td {
    font-size: 13px;
    white-space: pre-wrap;
  }
</style>
